<template>
	<div class="tools-warp">
		<el-card shadow="hover">
			<div slot="header">
				<div style="width: 400px; display: flex;align-items: center;">
					<el-input v-model="parms.keyword" placeholder="请输入内容" style="margin-right: 10px;"></el-input><el-button
						type="primary" @click="sherchQuer">查询</el-button> <el-button type="success"
						@click="addcanpus">添加</el-button>
				</div>
			</div>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="name" label="班级名称" align="center">
				</el-table-column>
				<el-table-column prop="campusName" label="校区" align="center">
				</el-table-column>
				<el-table-column prop="applyNum" label="预招人数" align="center" >
				</el-table-column>
				<el-table-column prop="applicationNum" label="已报人数" align="center" >
					<template slot-scope="scope">
						<el-button type="text" @click="lookelist(scope.row)"><span style="text-decoration: underline;">{{ scope.row.applicationNum || 0 }}</span> </el-button>
					</template>
				</el-table-column>
				<el-table-column prop="coachName" label="授课教练" align="center" >
				</el-table-column>
				<el-table-column prop="courseName" label="课程" align="center">
				</el-table-column>
				<el-table-column prop="openTime" label="开班日期" align="center" >
				</el-table-column>
				<el-table-column prop="remarks" label="备注" align="center" >
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200" align="center">
					<template slot-scope="scope">
						<el-button @click="endClick(scope.row)" type="text" size="small">编辑</el-button>
						<el-button @click="addClick(scope.row)" type="text" size="small">加入学员</el-button>
						<el-button @click="addListClick(scope.row)" type="text" size="small">排课列表</el-button>
						<el-button @click="addinfoClick(scope.row)" type="text" size="small">考勤明细</el-button>
						<el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog :title="texts" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="班级名称" prop="name">
					<el-input v-model="ruleForm.name" placeholder="请输入班级名称"></el-input>
				</el-form-item>
				<el-form-item label="校区" prop="campusId">
					<el-select v-model="ruleForm.campusId" placeholder="请选择校区" style="width: 100%;">
						<el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="预招人数" prop="applyNum">
					<el-input v-model="ruleForm.applyNum" maxlength="11" placeholder="请输入预招人数"></el-input>
				</el-form-item>
				<!-- <el-form-item label="已报人数" prop="applicationNum">
					<el-input v-model="ruleForm.applicationNum" maxlength="11" placeholder="请输入已报人数"></el-input>
				</el-form-item> -->
				<el-form-item label="课程" prop="courseId">
					<el-select v-model="ruleForm.courseId" placeholder="请选择课程" style="width: 100%;">
						<el-option v-for="(item, index) in courseoptions" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="授课教练" prop="coachId">
					<el-select v-model="ruleForm.coachId" placeholder="请选择授课教练" style="width: 100%;">
						<el-option v-for="(item, index) in useroptions" :key="index" :label="item.nickName"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开班日期" prop="openTime">
					<el-date-picker v-model="ruleForm.openTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
						placeholder="请选择开班日期" style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="ruleForm.remarks" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="加入学员" :visible.sync="addsVisible" width="60%" :close-on-click-modal="false">
			<div style="width: 400px; display: flex;align-items: center;">
					<el-input v-model="studentparms.keyword" placeholder="请输入内容"
						style="margin-right: 10px;"></el-input><el-button type="primary" @click="studentQuer">查询</el-button>
				</div>
			<el-table :data="studentList" stripe style="width: 100%" tooltip-effect="dark"
				@selection-change="handleSelectionChange"  height="500px">
				<el-table-column type="selection" width="55" align="center">
				</el-table-column>
				<el-table-column prop="name" label="学员姓名" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.name }}</span>
					</template>
					
				</el-table-column>
				<el-table-column prop="phone" label="学员电话" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.phone }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="campusName" label="校区" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.campusName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createDate" label="录入日期" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.createDate }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="remarks" label="备注" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.remarks }}</span>
					</template>
				</el-table-column>
				
			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="studenttotal"
					@current-change="handstudentChange">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="nomodals">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="排课列表" :visible.sync="paikeVisible" width="60%" :close-on-click-modal="false">
			<el-table :data="paikeData" stripe style="width: 100%">
				<!-- <el-table-column prop="classDate" label="排课日期" align="center">
				</el-table-column> -->
				<el-table-column prop="coachName" label="授课教练" align="center">
				</el-table-column>
				<el-table-column prop="className" label="班级" align="center">
				</el-table-column>
				<el-table-column prop="classHours" label="上课课时" align="center">
				</el-table-column>
				<el-table-column prop="classDuration" label="上课时长" align="center">
				</el-table-column>
				<el-table-column prop="" label="日期时间" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.classDate }} {{ scope.row.classStartTime }}~{{ scope.row.classEndTime }}</span>
					</template>
				</el-table-column>
				
				

			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="paikeVisible = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="考勤明细" :visible.sync="addsmodalVisible" width="60%" :close-on-click-modal="false">
			<el-table :data="infotList" stripe style="width: 100%" >
				<el-table-column prop="studentName" label="学员姓名" align="center">
				</el-table-column>
				<el-table-column prop="" label="日期时间" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.classYear }}{{ scope.row.classDate }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="isDeduction" label="是否扣课时" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.isDeduction == 0">未扣</span>
						<span v-if="scope.row.isDeduction == 1">已扣</span>
					</template>
				</el-table-column>
				<el-table-column prop="isAttendance" label="是否出勤" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.isDeduction == 0">未出勤</span>
						<span v-if="scope.row.isDeduction == 1">已出勤</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="date" label="录入日期" align="center">
				</el-table-column>
				<el-table-column prop="name" label="备注" align="center">
				</el-table-column> -->

			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="infototal" @current-change="handinfoChange">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="addsmodalVisible = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="查看已报人数" :visible.sync="DataVisible" width="65%" :close-on-click-modal="false" >
			<div style="width: 400px; display: flex;align-items: center;">
					<el-input v-model="modalkeyword" placeholder="请输入内容"
						style="margin-right: 10px;"></el-input><el-button type="primary" @click="lookelist({id:rowid})">查询</el-button>
				</div>
			<el-table :data="dialData" stripe style="width: 100%" height="500px">
				<el-table-column prop="date" label="学员姓名" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.name }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="学员电话" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.phone }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="校区" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.campusName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="剩余课时" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.studentCourse">{{ scope.row.studentCourse.residueNum }}</span>
						<span v-else>0</span>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="录入日期" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.createDate }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="name" label="备注" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.studentInfo.remarks }}</span>
					</template>
				</el-table-column> -->
				<el-table-column fixed="right" label="操作" width="100" align="center">
					<template slot-scope="scope">
						<el-button @click="outClick(scope.row)" type="danger" size="small">退班</el-button>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="DataVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { allAdminApi } from '@/api/allapi';
const adminApi = allAdminApi();
export default {
	name: 'campus',
	data() {

		return {
			imageUrl: '',
			input: "",
			texts: '添加教练信息',
			dialogVisible: false,
			addsVisible: false,
			addslistVisible: false,
			addsmodalVisible: false,
			DataVisible: false,
			paikeVisible: false,
			classId: null,
			infotList: [],
			arrIds: [],
			paikeData: [],
			dialData:[],
			courseoptions: [],
			useroptions: [],
			options: [],
			tableData: [],
			total: 0,
			infototal: 0,
			studenttotal: 0,
			studentList: [],
			miniparms: {
				keyword: "",
			},
			paikeprms:{
				limit: 10,
				page: 1,
				classId: "",
			},
			kaoqingprms:{
				limit: 10,
				page: 1,
				classId: "",
			},
			parms: {
				limit: 10,
				page: 1,
				keyword: "",
			},
			studentparms: {
				limit: 10,
				page: 1,
				keyword: "",
				courseId: null,
			},
			usersparms: {
				limit: 3000,
				page: 1,
				keyword: "",
				roleId: 2,
			},
			ruleForm: {
				name: '',
				applyNum: '',
				coachId: '',
				// applicationNum: '',
				courseId: '',
				openTime: '',
				remarks: '',
				campusId: '',
			},
			rules: {
				name: [
					{ required: true, message: '请输入班级名称', trigger: 'change' },
				],
				applyNum: [
					{ required: true, message: '请输入预招人数', trigger: 'change' },
				],
				// applicationNum: [
				// 	{ required: true, message: '请输入已报人数', trigger: 'change' },
				// ],
				openTime: [
					{ required: true, message: '请选择开班日期', trigger: 'change' },
				],
				coachId: [
					{ required: true, message: '请选择授课教练', trigger: 'change' },
				],
				courseId: [
					{ required: true, message: '请选择课程', trigger: 'change' },
				],
				campusId: [
					{ required: true, message: '请选择校区', trigger: 'change' },
				],
			},
			modalkeyword:"",
			rowid:"",
		};
	},
	mounted() {

		this.sherchList()
		this.courseinfofoApi()
		this.campusListApi();
		this.usersListApis()
		this.studentinfoListApi()
	},
	methods: {
		lookelist(row){
			this.rowid = row.id
			adminApi.listNoPagetList({classId:row.id,keyword:this.modalkeyword}).then((res) => {
				if (res.code == 200) {
					this.dialData = res.result;
					this.DataVisible = true;
				}
			})
			
		},
		addinfoClick() {
			adminApi.studentworkList(this.kaoqingprms).then((res) => {
				if (res.code == 200) {
					this.infotList = res.result;
					this.infototal = res.count;
					this.addsmodalVisible = true
				}
			})
			
		},
		handinfoChange(val){
			this.kaoqingprms.page = val
			this.addinfoClick()
		},
		addListClick(row) {
			this.paikeprms.classId = row.id
			adminApi.workoutList(this.paikeprms).then((res) => {
				if (res.code == 200) {
					this.paikeData = res.result;
					this.paikeVisible = true;
				}
			})
		},
		nomodals() {
			adminApi.addstudentclassApi(this.arrIds).then((res) => {
				if (res.code == 200) {
					this.$message({
						type: 'success',
						message: '添加成功!'
					});
					this.sherchList()
					this.addsVisible = false;
				}
			})

		},
		handleSelectionChange(val) {
			if (val) {
				let arr = [];
				val.forEach((item) => {
					let obj = {
						classId: this.classId,
						studentId: item.studentInfo.id
					};
					arr.push(obj)
				});
				this.arrIds = arr
			}

		},
		addClick(res) {
			this.classId = res.id
			this.studentparms.courseId = res.courseId
			this.studentparms.keyword = "";
			this.studentQuer()
			this.addsVisible = true;
		},
		studentQuer() {
			this.studentparms.page = 1
			this.studentinfoListApi()
		},
		handstudentChange(val) {
			this.studentparms.page = val
			this.studentinfoListApi()
		},
		studentinfoListApi() {
			adminApi.studentcourseList(this.studentparms).then((res) => {
				if (res.code == 200) {
					this.studentList = res.result;
					this.studenttotal = res.count;
				}
			})
		},
		usersListApis() {
			adminApi.userslistApi(this.usersparms).then((res) => {
				if (res.code == 200) {
					this.useroptions = res.result;
				}
			})
		},
		campusListApi() {
			adminApi.listNotPage(this.miniparms).then((res) => {
				if (res.code == 200) {
					this.options = res.result;
				}
			})
		},
		courseinfofoApi() {
			adminApi.courseinfofoList(this.miniparms).then((res) => {
				if (res.code == 200) {
					this.courseoptions = res.result;
				}
			})
		},
		sherchQuer() {
			this.parms.page = 1
			this.sherchList()
		},
		handleCurrentChange(val) {
			this.parms.page = val
			this.sherchList()
		},
		sherchList() {
			adminApi.classinfoList(this.parms).then((res) => {
				if (res.code == 200) {
					this.tableData = res.result;
					this.total = res.count;
				}
			})
		},
		// 退班
		outClick(row){
			this.$confirm('此操作将会退班学员, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				adminApi.outclassinfoinfo(row.id).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '退班成功!'
						});
						this.sherchList()
					}
				})
			})
		},
		endClick(row) {
			this.texts = "编辑教练信息";
			this.ruleForm = row
			this.dialogVisible = true;
		},
		handleClick(row) {
			this.$confirm('此操作将永久删除该教练, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				adminApi.deleteclassinfoinfo(row.id).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.sherchList()
					}
				})
			})
		},
		resetForm(formName) {
			this.ruleForm.password = "";
			this.ruleForm.textarea = "";
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
		},
		

		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					adminApi.addclassinfoApi(this.ruleForm).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.msg);
							this.$refs[formName].resetFields();
							this.ruleForm.remarks = "";
							this.sherchQuer()
							this.dialogVisible = false
						}
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		addcanpus() {
			this.texts = "添加教练信息";
			this.dialogVisible = true;
		},
	},
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
